@primary-color: #409eff;
@primary-active-color: #ecf5ff;
@primary-background-color: #ecf8ff;

.l-form-design{
    background-color: #f0f2f5;
    &--myComponent-title{
        padding: 8px 2px;
        font-size: 14px;
        color: #606266;
    }

    .myComponent-item-draggable{
        margin-bottom: 8px;
    }

    .myComponent-item{
        display: inline-block;
        width: 46%;
        margin: 2%;
        transition: transform 0ms;
    }

    .myComponent-item-body {
        padding: 8px 10px;
        background: #f3f9ff;
        font-size: 12px;
        cursor: move;
        border: 1px dashed #f3f9ff;
        border-radius: 3px;
        color: #043254;
        line-height: 16px;
    }


    .myComponent-item-icon {
        margin: 0 4px;
        color: #043254;
    }
    .myComponent-item-body:hover {
        border: 1px dashed #409EFF;
        color: #409EFF;
        .myComponent-item-icon {
            color: #409EFF;
        }
    } 

    .drag-form-table {
        position: relative;
        float: left;
        width: 100%;
        box-sizing: border-box;
        min-height: 80px;
        border: 1px dashed #e2e0e0;
        padding: 11px 8px;
        padding-top: 40px;
        box-sizing: border-box;
        margin-bottom: 11px;
        cursor: move;

        &__title{
            position: absolute;
            top: 8px;
            left: 8px;
            color: #e2e0e0;;
        }
        &.active {
            border: 1px dashed #409EFF;
            &>.drag-form-table__title{
                color: #409EFF;;
            }
        }
        

        &__content {
            width: 100%;
            height: 100%;
            min-height: 60px;
            overflow: hidden;  
            padding: 16px 0 64px 0; 
        }

        &__item {
            position: relative;
        }

        .drag-table-action-delete {
            position: absolute;
            bottom: -12px;
            right: 8px;
            padding: 4px;
        }
      
        .drag-table-action-clone{
            position: absolute;
            bottom: -12px;
            right: 40px;
            padding: 4px;
        }

        /*.ghost {
            background: white;
            border: 0 !important;
            border-top: 8px solid #409EFF!important;
            box-sizing: border-box;
            font-size: 0;
            content: '';
            overflow: hidden;
            padding: 0 !important;
            position: relative;
            outline: none 0;
            height: 0 !important;
            min-height: 0;
            width: 100%;
            margin: 2px 0;
        }*/
      }

      .drag-form-btn{
        padding-top:0;
        padding:11px 4px;
        min-height: 0;
      }


    .form-config-container,.component-config{
        box-sizing: border-box;
        position: relative;
        height: 100%;
        width: 100%;
        overflow: hidden auto;
        padding: 16px;
        padding-bottom: 8px;
    }

    .drag-form-container{
        position: relative;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        padding-top: 11px;
        .el-form{
            height: 100%;
            width: 100%;
        }
    
        .el-row {
            height: 100%;
            width: 100%;
        }
    
        .drag-form-list {
            position: relative;
            box-sizing: border-box;
            height: 100%;
            width: 100%;
            overflow: hidden;
            overflow-y: auto;


            .ghost{
                .el-form-item,&.drag-form-table,.drag-form-table{
                    border: 1px solid #F56C6C!important;
                    background: white;
                    border-radius: 3px;
                }
            }
            .myComponent-item.ghost {
                display: block;
                .myComponent-item-body{
                    background: white;
                    height: 52px !important;
                    line-height: 52px !important;
                    border: 1px solid #F56C6C!important;
                    padding: 0 !important;
                    padding-left: 16px !important;

                }
                background: white;
                box-sizing: border-box;
                font-size: 0;
                overflow: hidden;
                padding: 0 !important;
                position: relative;
                outline: none 0;
                min-height: 0!important;
                width: 100%!important;
                margin: 0!important;
                margin-bottom: 11px !important;
            }
            /*&.drag-form-list-add .ghost {
                background: white;
                border: 0 !important;
                border-top: 4px solid #409EFF!important;
                box-sizing: border-box;
                font-size: 0;
                content: '';
                overflow: hidden;
                padding: 0 !important;
                position: relative;
                outline: none 0;
                height: 0 !important;
                min-height: 0!important;
                width: 100%!important;
                margin: 2px 0!important;
            }*/
        }
    
        .drag-action-delete {
          position: absolute;
          bottom:-22px;
          right: 0px;
          padding: 4px;
        }
    
        .drag-action-clone{
          position: absolute;
          bottom:-22px;
          right: 32px;
          padding: 4px;
        }
    
        .el-form-item {
            position: relative;
            border: 1px dashed #e2e0e0;
            padding: 11px 8px;
            box-sizing: border-box;
            margin-bottom: 11px;
            background-color: #fff;
            cursor: move;
            &:hover{
              background-color: #f3f9ff;
            }
            &.active{
              border: 1px dashed #409EFF;
              background-color: #f3f9ff;
            }
        }
    }


    .reg-item {
        padding: 16px 8px;
        background: #f8f8f8;
        position: relative;
        border-radius: 4px;
    }

    .reg-item:not(:last-child){
        margin-bottom: 10px;
    }

    .reg-item-delete{
        position: absolute;
        top:-9px;
        right: -9px;
        padding: 2px;
    }



    .set-item{
        box-sizing: border-box;
        position: relative;
        width: 100%;
        height: 34px;
        padding:2px 0;
        padding-left: 22px;
        padding-right: 30px;
        border: 1px dashed transparent;
    
        .drag-item{
            display: block;
            box-sizing: border-box;
            position: absolute;
            top:8px;
            left: 2px;
            font-size: 16px; 
            cursor: move;
        }
    
        .delete-item{
            display: block;
            box-sizing: border-box;
            position: absolute;
            top:5px;
            right: 2px;
        }
    }


    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }


    .viewtable, .drag-form-btn{
        .drag-action-delete {
            bottom: -12px !important;;
            right: 8px !important;
        }
    
       .drag-action-clone{
            bottom:-12px !important;
            right: 40px !important;
        }
    }

    
}